<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="app">
    <h1 v-pre>{{msg}}</h1>
    <h1 v-once>{{msg2}}</h1>
</div>
</body>

</html>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>

    //v-pre:会跳过指令所在元素和其子节点的编译

    //v-once:只编译或者渲染一次,后续被当成静态元素

    //vue2中可以声明vm变量之后,直接在控制台输出vm中的data等属性
    //vue2:
    // let vm = new Vue({
    //     el: "#app",
    //     data: {
    //         msg: "吃了吗",
    //         msg2: "胡萝卜",
    //     }
    // })

    //vue3:
    // let vm = Vue.createApp({
    //     data(){
    //         return {
    //             msg2:'胡萝卜2'
    //         }
    //     }
    // })

    // vm.mount('#app')
</script>